<template>
  <div>
    <p>current result is {{count}} , count is {{evenOrOdd}}</p>

    <p>rootState is {{sumcount}}</p>

    <button @click="increment">+</button>
    <button @click="decrement">-</button>
    <button @click="increment2">+2</button>
    <button @click="decrement2">-2</button>
    <button @click="incrementIfOdd">increment if odd</button>
    <button @click="incrementAsync">increment async</button>
    <hr>
  </div>

</template>

<script>
import {mapState, mapGetters, mapActions,mapMutations} from 'vuex'

export default {
  name: "App",
  methods:{
    increment(){
      this.$store.commit('increment')
    },
    decrement(){
      this.$store.commit({
        type:'decrease'
      })
    },
    incrementIfOdd(){
       this.$store.dispatch('incrementIfOdd')
    },
    incrementAsync(){
      this.$store.dispatch('incrementAsync')
    },
    ...mapMutations({'decrement2':'decrease2'}),

    ...mapActions({'increment2':'addonestep2'})
  },
  computed:{
    /*count(){
      return this.$store.state.count
    },*/
    evenOrOdd(){
      return this.$store.getters.evenOrOdd
    },

    // 和上面的count()起到的效果是一致的
    ...mapState(['count']),

    ...mapGetters(['sumcount'])


  }

}
</script>

<style>

</style>
